const thumbBar = document.querySelector('.thumb-bar');
const overlay = document.querySelector('.overlay');
const displayedImg = document.querySelector('.displayed-img');
const button = document.querySelector('.dark');
var div1 = document.querySelector('.d1');
var right = document.querySelector('.right');
var left = document.querySelector('.left');

var darked = false;
var index=0;



//将创建4张图片，并赋给thumbar以数组的形式存储
for (let i = 0; i < 4; i++) {
    let imgSrc ='imges/'+(i+1)+'.jpg';
    const img = document.createElement('img');
    img.style.width="200px";
    img.style.height="100px";
    img.src = imgSrc;
    thumbBar.appendChild(img);
    
}
//将创建的img引用出来赋值给imgs
var imgs = document.querySelector('.thumb-bar').querySelectorAll('img');
console.log(imgs)

//底框图标的点击事件
thumbBar.onclick = function(e){
    const eventImg = e.target;
    // console.log(e.target);
    displayedImg.src = eventImg.src;
};
//变亮，变暗 按钮的点击事件
button.onclick = function(e){
    if (darked) {
        button.textContent = '变暗';
        darked = false;
        overlay.style.backgroundColor = 'rgba(0,0,0,0)';
    }else{
        button.textContent = '变亮';
        darked =true;
        overlay.style.backgroundColor = 'rgba(0,0,0,0.5)';

    }
};
//自动轮播
function auto(){
    timer = setInterval(function(){
        
        if(index>=imgs.length){
            index =0;
            change(index);
        }else{
            change(index)
            index++;
        }
    },2000);
}

auto();

//轮播函数，自动切换图片
function change(curIndex) {

    displayedImg.src = imgs[curIndex].src;

}
//鼠标移动到轮播图区域时停止轮播
// div1.onmouseover = function(){
//     displayedImg.style.cursor = 'pointer';
//     clearInterval(timer);
//     //停止计时器
// }
//鼠标离开时，开启自动轮播
// div1.onmouseout = auto;

//鼠标滑倒thumber时切换到对应图片
for(var i= 0;i<imgs.length;i++){
    imgs[i].index = i;
    imgs[i].onmouseover = function(){
        change(this.index);
    }
}
//按钮事件
var num =0;
//右键
right.addEventListener('click',function(){
    clearInterval(timer);

    if (index<imgs.length-1) {
        index++;
        console.log(index);
        change(index);
        
    }else{
        index =0;
        
        change(index);
    }
    auto();
    
})
//左键
left.addEventListener('click',function(){
    clearInterval(timer);
    index--;
    if (index<=0) {
        index = imgs.length-1
        console.log(index);
        change(index);
    }else{
        index--;
        console.log(index);
        change(index);
    }
    auto();
})








